// content.js
const TARGET_SELECTOR = '.leads-loading-block';
const FORM_CLASS = 'custom-plugin-form';

const STORAGE_KEYS = {
    IS_LOGGED_IN: 'isLoggedIn', // 登录状态存储键
    TOKEN: 'tokenInfo' ,    // 认证令牌存储键
    official_service:'uid',// 人员ID
};

const API_ENDPOINTS = {
    SUBMIT_FORM: 'https://erp.wmenzai.com:9014/magic-api/tiktok/table_tiktok-add', // 表单提交接口 **正式用
    // SUBMIT_FORM: 'https://erp.wmenzai.com:9014/magic-api/tiktok_test/table_tiktok-add', // 表单提交接口 **测试用
};

// 全局变量存储登录状态
let isLoggedIn = false;

// 创建表单元素
function createForm() {
    const form = document.createElement('form');
    form.className = FORM_CLASS;
    form.style.cssText = `
        display: inline-block;
        padding: 0px;
        border-radius: 8px;
        bottom:35%;
        right:0;
        position: fixed;  /* 确保不会被父容器隐藏 */
        z-index: 9999;      /* 确保在最上层 */
    `;
    // 表单内容
    form.innerHTML = `
    <div>
    <button type="button" 
            id="loginButton"
            style="
              width: 50px;
              display: flex;
              flex-wrap: wrap;
              background: #0089FF;
              color: white;
              border: none;
              padding: 8px 8px;
              border-radius: 4px;
              justify-content: center;
              cursor: pointer;
            ">
            <img src="https://ydyd-crm.oss-cn-beijing.aliyuncs.com/static/20250804/a2f04745390fd6897d09772b2cd1f581.png" alt="保存" title="保存" style="width: 24px;height: 24px;">
      <div>推送</div>
    </button>
  `;
    return form;
}

// 显示登录提示
function showLoginPrompt() {
    const shouldLogin = confirm('请先登录以使用插件功能。立即登录？');
    if (shouldLogin) {
        // 通知后台打开登录页面
        chrome.runtime.sendMessage({action: "openLogin"});
    }
}

// 表单提交处理
async function handleButtonClick(e) {
    const formDataH5 = document.querySelectorAll('.flex.h-full');
    // ---S---顶部信息
    let userInfoElement = formDataH5[2].querySelector(
        '[data-log-module="会话区域"][data-log-name="用户信息展开"]'
    )
    // 获取所有包含字段和值的容器
    const items = userInfoElement.children;
    // 创建结果数组
    const result = [];
    // 遍历每个容器提取信息
    for (let i = 0; i < items.length; i++) {
        // 字段名在每个容器的第一个子元素
        const labelElement = items[i].firstElementChild;
        // 值在字段名的下一个兄弟元素的第一个子元素
        const valueElement = labelElement.nextElementSibling.firstElementChild;
        if (labelElement && valueElement) {
            // 按照指定格式添加对象到数组
            result.push({
                label: labelElement.textContent,
                value: valueElement.textContent
            });
        }
    }
    // ---E---顶部信息
    // ---S---个人信息
    // 1. 仅通过属性定位标记元素（无 class 参与）
    const markerEl = document.querySelector('[data-log-module="会话区域"][data-log-name="用户信息展开"]');
    // 2. 向上遍历固定层级的祖先节点（根据实际 DOM 结构调整层级数）
    // 假设标记元素距离目标元素有 N 层父节点（例如 2 层，需根据实际结构确认）
    let targetEl = markerEl;
    const levelsToUp = 2; // 层级数：从标记元素向上数 N 层父节点
    for (let i = 0; i < levelsToUp; i++) {
        if (targetEl.parentNode) {
            targetEl = targetEl.parentNode; // 逐层向上移动
        } else {
            targetEl = null; // 若层级不足，返回 null
            break;
        }
    }
    // // 假设已获取 元素
    let targetEl2 = null;
    // 遍历 parentEl 的所有直接子节点
    for (let i = 0; i < targetEl.children.length; i++) {
        const child = targetEl.children[i];

        // 不使用 class 判断，通过子节点内部结构特征定位
        // 目标元素的第一个子节点是"用户信息"标题
        const firstChild = child.firstElementChild;
        if (firstChild && firstChild.textContent.trim() === '用户信息') {
            targetEl2 = child;
            break;
        }
    }
    // 结果：targetEl2 即为目标元素
    // console.log(targetEl2);
    // 存储结果
    // 基于已获取的（targetEl2）元素提取数据
    const results = [];
    // 定义字段标签与后端字段名的映射关系
    const fieldMap = {
        '备注': 'remark',
        '姓名': 'name',
        '电话': 'phone',
        '微信': 'wechat',
        '性别': 'gender',
        '地区': 'region',
        '地址': 'address',
        '年龄': 'age',
        '生日': 'birthday',
        "资源类别":'category',
        "抖音账号":'tiktok_account',
    };
    // 获取所有字段行（跳过第一个“用户信息”标题行）
    const fieldRows = Array.from(targetEl2.children).slice(1);
    fieldRows.forEach((row, index) => {
        // 1. 提取字段标签（递归查找文本节点）
        let label = '';
        const labelOuterSpan = row.children[0]?.querySelector('span');
        if (labelOuterSpan) {
            const findLabelText = (node) => {
                if (node.nodeType === Node.TEXT_NODE) {
                    label = node.textContent.trim();
                    return true;
                }
                for (const child of node.childNodes) {
                    if (findLabelText(child)) return true;
                }
                return false;
            };
            findLabelText(labelOuterSpan);
        }

        // 2. 提取对应的值
        let value = '';
        const valueArea = row.children[1];
        if (valueArea) {
            // 处理文本域
            const textarea = valueArea.querySelector('textarea');
            if (textarea) {
                value = textarea.value.trim();
            }
            // 处理输入框
            else {
                const input = valueArea.querySelector('input');
                if (input) {
                    value = input.value.trim();
                }
                // 处理电话（特殊文本）
                else {
                    const findPhoneText = (node) => {
                        if (node.nodeType === Node.TEXT_NODE) {
                            value = node.textContent.trim();
                            return true;
                        }
                        for (const child of node.childNodes) {
                            if (findPhoneText(child)) return true;
                        }
                        return false;
                    };
                    findPhoneText(valueArea);
                }
            }
        }
        // 3. 按格式添加到结果数组（使用映射的后端字段名）
        results.push({
            label: label,
            name: fieldMap[label] || '', // 对应后端字段名
            value: value
        });
    });
    const nameItem = results.find(item => item.name === 'name');
    let userName = '';
    const copyIcon = document.querySelector('.i-icon-copy');
    if (copyIcon) {
        // 2. 找到它的上层容器
        const userBlock = copyIcon.closest('div'); // 找到最近的包裹 div
        // 3. 获取前一个 div 中的文本（通常就是用户名）
        const usernameDiv = userBlock?.querySelector('div');
        // 4. 提取用户名文本
        userName = usernameDiv?.textContent.trim();
    }
    if (nameItem) {
        nameItem.value = userName;
    }

    // ---E---个人信息
    const formAllData = {
        information: result,
        userInfo: results
    };
    const { information = [] } = formAllData; // 默认空数组，防止 information 未定义

    const dyNameObj = information.find(item => item?.label === '来源抖音号');

     console.log(dyNameObj)
    // 使用解构赋值 + 默认值，避免重复判断
    var adTitleObj = information.find(item => item?.label === '广告标题');
    var adTitle =''
    var dyName = dyNameObj?.value ?? '';
    // formAllData.userInfo =[
    // {label: '备注', name: 'remark', value: '测试备注'},
    // {label: '姓名', name: 'name', value: '测试抖音名称'},
    // {label: '电话', name: 'phone', value: '15545462365'},
    // {label: '微信', name: 'wechat', value: '13241452826'},
    // {label: '性别', name: 'gender', value: '男'},
    // {label: '地区', name: 'region', value: '辽宁省'},
    // {label: '地址', name: 'address', value: '沈阳市和平区'},
    // {label: '年龄', name: 'age', value: '28'},
    // {label: '生日', name: 'birthday', value: '1999-08-01'},
    // {label: '抖音用户名称', name: 'tiktok_account', value: '抖音用户名称'},
    // ]

    if(adTitleObj){
        let firstHashIndex = adTitleObj.value.indexOf('#'); // 获取第一个 # 的位置
        adTitle = adTitleObj.value.slice(firstHashIndex + 1).split(' ')[0]; // 获取第一个 # 后面的第一个词
    }else{
        adTitle =''
    }
    var postData =
    {
            "notes": formAllData.userInfo[0].value,
            "name": formAllData.userInfo[1].value,
            "phone": formAllData.userInfo[2].value,
            "we_chat": formAllData.userInfo[3].value,
            "gender": formAllData.userInfo[4].value,
            "area": formAllData.userInfo[5].value,
            "address": formAllData.userInfo[6].value,
            "age": formAllData.userInfo[7].value,
            "birthday": formAllData.userInfo[8].value,
            "tiktok_account":  dyName,
            "category_value": adTitle,
     }

    // 0是电话 1 是微信  没有是 空字符串
    if (postData.phone && postData.phone.trim() !== '') {
        console.log(1)
        postData.contact_information_first = 0;
        postData.allocate_priority=''
    } else if (postData.we_chat && postData.we_chat.trim() !== '') {
        console.log(2)
        postData.contact_information_first = 1;
        postData.allocate_priority=''
    } else {
        postData.contact_information_first =''; // or undefined or empty string '' depending on your needs
        alert('手机或微信暂无数据，无法进行推送')
        return
    }
    // 运营人员ID
    const official_service_data = await chrome.storage.local.get([STORAGE_KEYS.official_service]);
    postData.official_service = official_service_data[STORAGE_KEYS.official_service];
    const official_name=await chrome.storage.local.get(['userName']);
    postData.operation_name = official_name.userName;
    // postData.contact_information_first='' //联系方式优先级
    // postData.allocate_priority='' //分配优先级
    // 接口需要使用formData形式传参
    const formData = new FormData();
    // // 2. 遍历 postData 并添加到 FormData
    for (const key in postData) {
        formData.append(key, postData[key]);
    }
    //发送API请求
    fetch(API_ENDPOINTS.SUBMIT_FORM, {
        method: 'POST',
        body: formData  // 这里 formData 是 FormData 对象
    }).then(response => response.json())
        .then(data => {
            if (data.code === 0) {
                alert('保存成功');
            } else {
                alert(data.msg);
            }
        })
        .catch(error => {
            console.error('请求失败:', error);
            alert('保存失败，请检查网络或联系管理员');
        });
}


// 插入表单到指定位置
function insertForm() {
    // 检查是否已存在表单
    if (document.querySelector(`.${FORM_CLASS}`)) return;

    const target = document.querySelector(TARGET_SELECTOR);
    if (!target) return;

    const form = createForm();
    // 为按钮添加点击事件监听器
    const loginButton = form.querySelector('#loginButton');
    loginButton.addEventListener('click', handleButtonClick);
    target.parentNode.insertBefore(form, target.nextSibling);
}

// 观察器配置
const observer = new MutationObserver((mutations) => {
    // 只有在登录状态下才处理DOM变化
    if (!isLoggedIn) return;

    mutations.forEach(mutation => {
        if (mutation.type === 'childList') {
            const target = document.querySelector(TARGET_SELECTOR);
            if (target && !document.querySelector(`.${FORM_CLASS}`)) {
                insertForm();
            }
        }
    });
});

/// 初始化逻辑
function init() {
    // 检查登录状态
    chrome.storage.local.get([STORAGE_KEYS.IS_LOGGED_IN], result => {
        isLoggedIn = result[STORAGE_KEYS.IS_LOGGED_IN] || false;
        if (!isLoggedIn) {
            showLoginPrompt();
        } else {
            // 插入表单
            insertForm();
            // 启动观察器监听整个文档的变化
            observer.observe(document.documentElement, {
                childList: true,
                subtree: true,
                attributes: false,
                characterData: false
            });
        }
    });
    setupMessageListeners();
}

// 移除表单函数
function removeForm() {
    const existingForm = document.querySelector(`.${FORM_CLASS}`);
    if (existingForm) {
        existingForm.remove();
    }
}

function setupMessageListeners() {
    chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
        if (request.action === "loginSuccess") {
            isLoggedIn = true;
            insertForm();
            // 启动观察器
            observer.observe(document.documentElement, {
                childList: true,
                subtree: true,
                attributes: false,
                characterData: false
            });
        } else if (request.action === "logout") {
            isLoggedIn = false;
            removeForm();
            // 停止观察器
            observer.disconnect();
        }
    });
}

// 启动插件
if (document.readyState === 'complete' || document.readyState === 'interactive') {
    requestAnimationFrame(init);
} else {
    document.addEventListener('DOMContentLoaded', init);
}
